<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>p6_制作网页固定广告条</title>
    <style>
        .top {
            background-color: #5aa4ae;
            color: #fff;
            font-size: 30px;
            height: 120px;
            position: fixed;
            top: 0;
            /* viewport 视口:用来展示页面内容的窗口
                100vw:100%的视口宽度,也就是全屏宽 100vh:100%的视口高度,也就是全屏高*/
            width: 100vw;
        }
        .left,.right {
            width: 60px;
            height: 200px;
            position: fixed;
            top: 300px;
        }
        .left {
            background-color: #FFF799;
            left: 20px;
        }
        .right {
            background-color: #F35336;
            right: 20px;
        }
        .main {
            margin-top: 130px;
        }
    </style>
</head>
<body>
    <div class="top">我是顶部广告条</div>
    <div class="left">我是左侧广告条</div>
    <div class="right">我是右侧广告条</div>
    <div class="main">
        我是内容
        <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aliquam cum distinctio dolorem enim est
            explicabo facere harum hic inventore minus nisi, odit quis reiciendis saepe tempora, ullam veritatis vitae.
        </div>
        <div>Ad adipisci animi, atque consectetur cupiditate dicta dignissimos earum eius fugiat id, iusto laborum quas
            quod ratione repudiandae rerum sed, totam? Adipisci, debitis deserunt dolores est laudantium recusandae sit
            voluptatibus?
        </div>
        <div>A at deserunt dolor dolores explicabo fuga harum illo impedit ipsa ipsam maiores placeat quam qui,
            quibusdam quisquam quod quos recusandae repellat repellendus repudiandae saepe sit ullam vel voluptate
            voluptatem.
        </div>
        <div>Amet at culpa cumque, debitis doloremque est fuga fugiat iure natus odio odit placeat quas repellat
            reprehenderit sapiente sit tempora tempore velit. Cupiditate est facilis modi quod recusandae sint vero.
        </div>
        <div>Architecto dignissimos fugiat in laborum magnam modi quibusdam ullam vitae! Assumenda cupiditate ex
            expedita explicabo harum inventore itaque natus perspiciatis quas, sint tenetur totam, vel voluptates. Aut
            debitis distinctio fugit.
        </div>
        <div>Hic reprehenderit repudiandae sit vitae! Accusantium consequuntur, cumque distinctio ducimus facilis
            impedit in, ipsam laudantium maxime minus nostrum nulla obcaecati praesentium quaerat quasi reprehenderit
            repudiandae similique soluta tempore totam vero.
        </div>
        <div>Animi, eligendi error explicabo fugiat harum in ipsa perferendis quasi suscipit voluptatem. Aperiam dolorum
            eum explicabo in numquam, officiis perspiciatis praesentium quia! Aliquam aliquid laudantium maiores nulla
            omnis provident veniam.
        </div>
        <div>Ea est magni officia praesentium quae. Architecto aut culpa ex excepturi illum inventore, ipsa itaque
            molestiae necessitatibus numquam pariatur placeat repellat similique vero voluptates. Exercitationem hic
            magnam recusandae repellendus totam?
        </div>
        <div>Alias aliquid asperiores aspernatur consequatur consequuntur doloremque ea eaque, ex, explicabo fugit
            impedit laborum nemo neque placeat praesentium quia repudiandae saepe sapiente sed similique, tempora
            tempore ullam velit. Id, tenetur!
        </div>
        <div>Harum illum voluptatem voluptatibus? A accusamus adipisci, commodi cumque est exercitationem ipsam magnam
            magni numquam quam, rem, sed sunt suscipit. Aperiam at beatae placeat sequi temporibus? Error inventore
            temporibus voluptatum.
        </div>
        <div>Accusantium beatae debitis earum, est facere fugit iusto libero magni necessitatibus nostrum officiis
            quidem veniam veritatis. Amet animi cumque dolore ea facilis, hic laboriosam quod recusandae repellendus
            voluptates? Beatae, dicta.
        </div>
        <div>Accusantium aspernatur beatae delectus, esse facere nesciunt nisi, nulla odio officia porro quasi
            repellendus veritatis voluptatibus? Architecto blanditiis cum dolorem laboriosam neque non quis sapiente
            ullam unde voluptates! Quam, unde?
        </div>
        <div>Debitis earum harum illum praesentium quas! Aliquid assumenda blanditiis dolorem dolores ea eligendi
            excepturi illum ipsa labore, laborum libero neque nihil nisi qui quidem, repellat, tenetur ullam unde ut
            veniam.
        </div>
        <div>Deleniti ea eius eos in incidunt maiores non nostrum perferendis porro quam quibusdam sed sequi, tempora,
            velit, voluptatibus? Aperiam asperiores dignissimos doloremque id illum ipsum natus provident quaerat quod
            sunt?
        </div>
        <div>Error in, reprehenderit. Dolore doloremque incidunt inventore nihil quidem quisquam repellat. Corporis
            delectus neque qui? Animi, distinctio dolores doloribus ex expedita, facere illum maxime minus nisi
            perspiciatis reiciendis repellendus similique!
        </div>
        <div>Alias beatae cumque dolorem incidunt iste magnam neque quibusdam, sed similique unde! Assumenda atque autem
            est facere harum ipsa laboriosam molestiae, nemo nihil nulla, tempore totam, voluptates! Dolore id, maxime?
        </div>
        <div>Amet culpa doloremque dolores ex expedita hic ipsa iure maiores natus nulla, provident qui quo similique
            tempore veritatis vitae voluptas? Ad aliquid, delectus et eveniet quod repudiandae rerum suscipit veritatis!
        </div>
        <div>Eligendi impedit magnam modi possimus ratione reiciendis sunt? Accusamus dolor illum in omnis, provident
            quam quasi rem sunt. Asperiores dolor dolores et necessitatibus nobis officia, quisquam rerum sed temporibus
            unde?
        </div>
        <div>Accusamus ad consequatur, dicta eos, est eveniet hic illo laudantium natus nemo numquam placeat quia
            repellendus, similique sunt veniam voluptas? Accusantium atque aut cumque enim inventore neque, repellendus
            sit voluptas.
        </div>
        <div>Adipisci dolores eveniet non quae quisquam, recusandae reprehenderit suscipit! Aliquid consequuntur
            deserunt dolorem dolores eaque ex illum libero modi necessitatibus omnis quaerat quibusdam, quis rem rerum
            temporibus tenetur totam, voluptates.
        </div>
        <div>Adipisci animi asperiores assumenda culpa deleniti dolorum ea, iste magni maxime nisi nulla perferendis
            quaerat quod, ratione repudiandae sint voluptate! Ad cumque enim non, perferendis repudiandae veritatis!
            Earum, fuga, voluptatibus?
        </div>
        <div>Aut blanditiis fuga fugit id nobis perspiciatis quibusdam reprehenderit rerum unde vel? A aliquid cum
            debitis doloribus dolorum earum illum laboriosam minima modi nesciunt, perferendis quas quis repellat
            tempora voluptatem?
        </div>
        <div>A amet architecto, corporis doloremque dolores explicabo fuga iure molestiae molestias nam obcaecati odio
            provident quas quibusdam quod sit temporibus tenetur vel velit voluptate! Architecto, iure pariatur.
            Facilis, quasi, voluptatibus.
        </div>
        <div>Accusantium atque doloribus dolorum, enim est excepturi impedit, magnam necessitatibus nisi non pariatur
            provident, quis reprehenderit sapiente veniam voluptate voluptates? Ex molestiae nesciunt nobis odio porro
            rerum suscipit vitae voluptatem!
        </div>
        <div>Accusantium delectus deleniti, dolor eum natus numquam perferendis recusandae repudiandae saepe! Distinctio
            earum enim et, ex explicabo fugiat id impedit iste laudantium libero magnam obcaecati officia temporibus
            tenetur, ullam voluptas.
        </div>
        <div>At deleniti deserunt dolor dolore eaque, id itaque magni natus perspiciatis placeat, qui quos ullam
            voluptates. Aperiam atque autem eius error et exercitationem, modi nesciunt numquam optio rem sequi
            veritatis.
        </div>
        <div>Accusamus deserunt et facere nulla perspiciatis quam suscipit tempore. Ab aspernatur eaque fugiat libero
            nemo nobis rem repellat sapiente? Ab asperiores cum dolores ipsa itaque numquam odio quibusdam sint
            voluptates.
        </div>
        <div>Adipisci amet aut consequatur, cum eaque eum ipsa itaque iure maxime non, ratione voluptate? Dolor enim
            iure labore nihil rem! Alias at consectetur iste maxime quis rerum sint tempore. Dolor.
        </div>
        <div>Accusantium amet illum iure nostrum perspiciatis saepe tempore ut voluptatibus. Dignissimos ea eligendi
            eveniet illum quibusdam quis, ut velit. Accusamus inventore non pariatur quae repellat? Ea maiores porro
            tempore voluptates?
        </div>
        <div>Aliquid architecto assumenda deleniti dolor enim eos est exercitationem fugiat harum, hic impedit incidunt
            inventore minus nobis non numquam quam, qui reiciendis rem sit tempore temporibus totam ut voluptates
            voluptatibus.
        </div>
        <div>Accusamus consequatur nostrum numquam officiis quo similique sint? A, asperiores blanditiis consequatur
            consequuntur cumque eos error fugit, iure libero officiis repellat sint ullam vel veniam vitae! Architecto
            quas quia tempora?
        </div>
        <div>Accusamus accusantium amet commodi doloremque dolores, fugit illo impedit incidunt labore laudantium magnam
            minima optio perferendis quaerat quam qui quibusdam quo repellendus sequi suscipit tenetur ullam velit vero.
            Consectetur, facere?
        </div>
        <div>Architecto asperiores commodi consequuntur delectus, dignissimos eos esse explicabo fuga harum iure
            possimus praesentium reiciendis soluta voluptas, voluptates. Ad aperiam consequatur doloribus enim error
            ipsam optio possimus quasi repellat repellendus!
        </div>
        <div>Accusantium alias aperiam dicta eius eveniet fuga hic laborum molestias nemo, suscipit. Ab commodi
            consequuntur culpa cum eius iste modi nostrum quasi quo temporibus. Ducimus et nihil possimus repellendus
            suscipit!
        </div>
        <div>Dolorem dolores ducimus ea eaque, eos, eum facere labore non nostrum officia possimus suscipit tenetur
            voluptate? Culpa cum delectus eos eveniet facere itaque odio, omnis quis rerum veniam. Eius, similique.
        </div>
        <div>Alias ipsam omnis reiciendis sunt ullam! Accusamus architecto aut dolorem eos excepturi ipsa, magnam nisi
            quisquam reiciendis veniam? Accusamus libero nostrum perferendis sequi ullam. Doloribus esse itaque libero
            quisquam vel.
        </div>
        <div>Ad asperiores atque delectus, ducimus explicabo fugiat illum in, ipsam laudantium officia possimus
            similique veniam voluptate! Adipisci asperiores debitis, earum eius eum eveniet, hic magnam non placeat quod
            similique veniam!
        </div>
        <div>Consequatur culpa dolorum ratione tempore, temporibus ut vero voluptates! Blanditiis consectetur eum fuga
            illo inventore necessitatibus reprehenderit temporibus. A corporis dolore enim ex expedita numquam rerum
            tempore totam! Quae, vitae?
        </div>
        <div>Ad atque aut autem debitis distinctio dolore eligendi enim et facilis in maiores maxime nam pariatur
            placeat, quibusdam quos sint sunt temporibus ullam velit. Alias aliquam assumenda sequi temporibus tenetur!
        </div>
        <div>Dolores error et facilis mollitia nam. Amet, autem eligendi esse explicabo facere facilis illum quas quis
            quod rem, saepe totam veritatis! Alias dignissimos ipsum non officia provident quam recusandae veritatis!
        </div>
        <div>Accusantium aliquid consequatur cupiditate eius eos id, incidunt iste perferendis provident quas quibusdam
            rerum, totam veritatis! Dignissimos ea harum mollitia veritatis. Aperiam, eaque harum nam numquam omnis
            repellat ullam voluptas.
        </div>
        <div>Aliquid amet assumenda consectetur dolor dolore ea eaque eum omnis quam repellat. Aliquam beatae cum dolor
            dolorum, eveniet explicabo nemo suscipit ut. Dolor, hic maxime rem rerum ut vitae voluptates.
        </div>
        <div>Ipsam magnam odio ratione. Distinctio dolores et expedita magnam placeat quia voluptatibus! Ab accusantium
            dolor minus non provident, sequi tenetur! Alias beatae ipsam itaque odio perspiciatis placeat ullam veniam,
            voluptates.
        </div>
        <div>Aliquam aliquid animi dignissimos dolor ipsa molestias, neque nihil nobis, officia perferendis qui quos
            reiciendis suscipit? Eos explicabo illo iure, non nulla odit omnis provident quaerat quos ullam! Autem,
            rerum.
        </div>
        <div>Aliquid aspernatur atque dolor doloremque eum ex, perferendis quia quod repellat rerum? Aliquam assumenda
            cumque debitis eaque, fuga itaque modi obcaecati perspiciatis quibusdam, quo repellat reprehenderit sint
            sunt tempora temporibus!
        </div>
        <div>Ab alias aliquam amet aperiam, debitis delectus, dicta dolore dolorem dolorum eum eveniet ex fugit illum
            ipsum maxime neque nisi nulla porro possimus quasi quis, sunt suscipit tenetur unde ut.
        </div>
        <div>At consectetur corporis cum dicta dolores expedita facilis fuga iure libero magnam maxime modi, non
            obcaecati perferendis porro, repudiandae rerum tempora ullam veniam voluptatum. Alias doloremque expedita
            magni quae reprehenderit!
        </div>
        <div>Aliquid, culpa cumque dicta dolorem dolorum incidunt inventore, ipsam necessitatibus obcaecati officiis
            perferendis possimus provident, repellat repellendus saepe temporibus voluptate! Adipisci, beatae deserunt
            dicta dolor doloremque iste porro sint voluptatibus.
        </div>
        <div>Adipisci architecto aspernatur at autem distinctio eius eum exercitationem facere fuga fugiat itaque
            laboriosam libero non nostrum officia perspiciatis possimus praesentium quaerat qui quisquam, reprehenderit
            saepe sapiente sit ullam voluptatum.
        </div>
        <div>Aliquam animi dicta dolorem earum enim est, explicabo harum impedit itaque labore laboriosam libero maxime
            nostrum officiis quas quia quis rerum sit, tenetur voluptate. Eum reiciendis repellat suscipit veniam
            voluptatibus.
        </div>
        <div>Alias, asperiores consectetur cumque dicta doloribus dolorum eaque exercitationem expedita fugit in, iste
            iure maxime odio possimus unde velit voluptate? Corporis deleniti dicta distinctio dolorum explicabo itaque
            modi quaerat, tempore.
        </div>
        <div>Ab amet beatae consectetur consequuntur culpa distinctio dolorem ducimus eaque eum expedita facere illum
            ipsam minus neque nulla odit possimus qui rerum sapiente vel velit, veniam voluptatibus! Blanditiis, ducimus
            nam?
        </div>
        <div>A aspernatur consequuntur delectus deserunt dignissimos dolorem doloremque eligendi et eum explicabo ipsa
            iure laborum magni minus neque perspiciatis, placeat provident quis ratione sequi similique sint, sit, unde
            ut voluptatibus?
        </div>
        <div>A accusamus aliquam animi assumenda, aut cum delectus deserunt doloribus eius eligendi illo impedit ipsum
            iusto magni maiores mollitia nemo odio perferendis quae reiciendis repellat repellendus soluta suscipit
            totam vel.
        </div>
        <div>Ducimus eaque, et fugiat ipsam reiciendis tempora vel voluptatibus? Aperiam architecto aspernatur commodi
            consequatur cum est, exercitationem labore laborum nam odio officia officiis quae quidem quos reiciendis
            sequi, suscipit tenetur.
        </div>
        <div>Aliquam, deserunt ea et harum in nobis provident totam vero. Ad aliquam consequatur consequuntur earum, et
            id illo labore laborum magnam nesciunt omnis possimus, quasi, reprehenderit sed similique suscipit totam.
        </div>
        <div>Fugit nesciunt officia similique unde! Ad aliquam asperiores commodi cum delectus dignissimos distinctio
            exercitationem ipsam iure labore, laborum nemo nihil omnis, perspiciatis reprehenderit rerum, sed sint sit
            suscipit tempore veritatis?
        </div>
        <div>Alias aliquam animi assumenda autem beatae consequuntur ducimus ea earum eius eos et eveniet ex
            exercitationem explicabo iure molestiae omnis, provident quaerat quas quibusdam quisquam ratione reiciendis
            repudiandae sapiente ut.
        </div>
        <div>Aliquid, aperiam, sint. Corporis delectus itaque, iure nihil quibusdam sapiente similique totam! At beatae
            esse eveniet ex explicabo inventore labore molestias natus, necessitatibus odit perferendis, porro quasi
            sequi tempore vitae.
        </div>
        <div>Ab adipisci blanditiis enim inventore, iste laborum minus natus nemo recusandae vitae. Alias aliquam
            debitis facere ipsam libero neque nostrum nulla odio officiis provident, quos, sequi sint soluta tenetur
            unde!
        </div>
    </div>
</body>
</html>